<template>
  <div class="RMB-box">
    <TitleBar title="金币购买与人民币关联设置" refresh />
    <div class="RMB-content">
      <el-table ref="multipleTable" class="table-class" :data="tableData" tooltip-effect="dark">
        <el-table-column align="center" label="金币单价">
          <template slot-scope="scope">
            <el-input v-model="scope.row.coinPrice" placeholder="请输入内容" @blur="dataChange" disabled="disabled" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="第三方支付费率" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.serviceCharge" controls-position="left" @change="dataChange" :min="0" :max="100" :precision="1" :step="0.1"></el-input-number>
            <span slot="suffix" style="line-height: 40px">%</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="企业税率" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.tax" controls-position="left" @change="dataChange" :min="0" :max="100" :precision="1" :step="0.1"></el-input-number>
            <span slot="suffix" style="line-height: 40px">%</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="coinRealPrice" label="金币销售单价" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{ scope.row.coinRealPrice }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="RMB-but-box">
      <div class="RMB-but">
        <div @click="UpaddCoinOrRMB">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import { coinOrRMB, addCoinOrRMB } from "@/api/operate.js";
export default {
  name: "RMB",
  data() {
    return {
      // 数据列表
      tableData: [
        {
          coinPrice: 1,
          serviceCharge: 0,
          tax: 0,
          coinRealPrice: 1
        }
      ]
    }
  },
  created() {
    this.getCoinOrRMB()
  },
  methods: {
    // 提交
    UpaddCoinOrRMB() {
      addCoinOrRMB({
        coinNum: 1,
        coinPrice: 1,
        coinRealPrice: this.tableData[0].coinRealPrice*1000,
        serviceCharge: this.tableData[0].serviceCharge*1000,
        tax: this.tableData[0].tax*1000,
        id: 1
      }).then(res => {
        this.getCoinOrRMB();
      });
    },
    // 查询
    getCoinOrRMB() {
      coinOrRMB().then(res => {
        console.log('aaaaa',res)
        this.tableData[0].coinPrice = res.data[0].coinPrice// 单价
        this.tableData[0].serviceCharge = res.data[0].serviceCharge/1000 // 第三方
        this.tableData[0].tax = res.data[0].tax/1000 // 企业
        this.tableData[0].coinRealPrice = res.data[0].coinRealPrice/1000 // 实际单价
      });
    },
    // 在 Input 失去焦点时触发
    dataChange() {
      const vm = this
      const a = vm.tableData[0].coinPrice
      const b = vm.tableData[0].serviceCharge
      const c = vm.tableData[0].tax
      vm.tableData[0].coinRealPrice = parseFloat(a * (b/100) + (c/100) + a).toFixed(3)
    }
  }
};
</script>

<style scoped lang="scss">
.el-input-number {
  width: 80%;
}
.RMB-box {
  font-family: PingFang-SC-Bold;
  width: 100%;
  /*height: 100%;*/
  /*overflow: auto;*/
  padding: 0 110px 110px 30px;
  margin: 16px 0;
}
.title {
  width: 100%;
  height: 37px;
  display: flex;
  flex-flow: nowrap row;
  margin: 16px 0;
  justify-content: space-between;
}
.title-left {
  height: 37px;
  display: flex;
  align-items: center;
  float: left;
}
.title-left > div {
  width: 11px;
  height: 20px;
  display: inline-block;
  background: rgba(72, 141, 255, 1);
  border-radius: 4px;
}
.title-left > p {
  margin-left: 14px;
}
.RMB-content {
  width: 100%;
  padding: 26px 24px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.RMB-but-box {
  width: 100%;
  display: flex;
  margin-top: 26px;
  justify-content: center;
}
.RMB-but > div {
  display: inline-block;
  width: 106px;
  height: 40px;
  background: rgba(72, 141, 255, 1);
  border-radius: 2px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 40px;
  cursor: pointer;
}
</style>
